/* -- 布局 -- */

@each $v in relative, absolute, fixed {
	.#{$v} {
		position: $v;
	}
}

@each $v in top, right, bottom, left, inset {
	@if $v == inset {
		.inset {
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
		}
	} @else {
		.#{$v}-0 {
			#{$v}: 0;
		}
	}
}

.flex {
	display: flex;
	align-items: center;
}

.flex-c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-r {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.flex-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-d-t {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flex-d-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flex-d-lc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.flex-d-sb {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.flex-l {
	align-self: start;
}

.flex-self-end {
	align-self: flex-end;
}

.flex-1 {
	flex: 1;
}

.flex-wrap {
	flex-wrap: wrap;
}

.shrink-0 {
	flex-shrink: 0;
}

/* -- 尺寸 -- */

.w {
	width: 100%;
}

.h {
	height: 100%;
}

@for $i from 8 through 200 {
  .square-#{$i} {
  	width: #{$i}rpx;
  	height: #{$i}rpx;
  }
	
	.w-#{$i} {
		width: #{$i}rpx;
	}
	
	.h-#{$i} {
		height: #{$i}rpx;
	}
}


/* -- 间距 -- */

@for $i from 4 through 100 {
	.m-h#{$i} {
	  margin-left: #{$i}rpx;
		margin-right: #{$i}rpx;
	}
	
	.m-v#{$i} {
	  margin: #{$i}rpx 0;
	}
	
	.m-t#{$i} {
	  margin-top: #{$i}rpx;
	}
	
	.m-l#{$i} {
	  margin-left: #{$i}rpx;
	}
	
	.m-r#{$i} {
	  margin-right: #{$i}rpx;
	}
	
	.m-b#{$i} {
	  margin-bottom: #{$i}rpx;
	}
	
	.p-a#{$i} {
	  padding: #{$i}rpx;
	}
	
  .p-h#{$i} {
    padding-left: #{$i}rpx;
    padding-right: #{$i}rpx;
  }
	
	.p-v#{$i} {
		padding-top: #{$i}rpx;
		padding-bottom: #{$i}rpx;
	}
	
	.p-t#{$i} {
	  padding-top: #{$i}rpx;
	}
	
	.p-l#{$i} {
	  padding-left: #{$i}rpx;
	}
	
	.p-b#{$i} {
	  padding-bottom: #{$i}rpx;
	}
}

/* 文字样式 */

@for $i from 24 through 40 {
	.text-700-1#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-1;
	}
	
	.text-700-2#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-2;
	}
	
	.text-700-3#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-3;
	}
	
	.text-700-4#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-4;
	}
	
	.text-700-5#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-5;
	}
	
	.text-500-1#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-1;
	}
	
	.text-500-3#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-3;
	}
	
	.text-500-4#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-4;
	}
	
	.text-500-5#{$i} {
		font-weight: bold;
		font-size: #{$i}rpx;
	  color: $text-color-5;
	}
	
	.text-400-1#{$i} {
		font-weight: 400;
		font-size: #{$i}rpx;
	  color: $text-color-1;
	}
	
	.text-400-2#{$i} {
		font-weight: 400;
		font-size: #{$i}rpx;
	  color: $text-color-2;
	}
	
	.text-400-3#{$i} {
		font-weight: 400;
		font-size: #{$i}rpx;
	  color: $text-color-3;
	}
	
	.text-400-4#{$i} {
		font-weight: 400;
		font-size: #{$i}rpx;
	  color: $text-color-4;
	}
	
	.text-400-5#{$i} {
		font-weight: 400;
		font-size: #{$i}rpx;
	  color: $text-color-5;
	}
}

.text-c {
	text-align: center;
}

.text-r {
	text-align: right;
}

/* 边框(半线) */
.hairline {
	&-top {
		position: relative;
		&::before {
			@include hairline-top;
		}
	}
	&-bottom {
		position: relative;
		&::after {
			@include hairline-bottom;
		}
	}
}

/* 装饰样式 */

@for $i from 4 through 40 {
	.r-#{$i} {
		border-radius: #{$i}rpx;
	}
}

.bg-1 {
	background-color: $bg-color-1;
}

.bg-2 {
	background-color: $bg-color-2;
}

.bg-7 {
	background-color: $bg-color-7;
}

.border-b4 {
	border-bottom: 1rpx solid $border-color-4;
}

.overflow-hidden {
	overflow: hidden;
}

.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.page-image {
 	background-image: url("");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
}

/* 功能样式 */
.no-wrap {
  overflow: hidden;   
  white-space: nowrap; 
}